<template>
  <div style="margin-top:10px">
    <!-- ref相当于Id:model是表单内容-->
    <el-form label-width="125px" ref="modifyInfo" :rules="formInfoRules" :model="formInfo" v-show="type === 'node'">
      <el-row >
         <el-col :span="12">
          <el-form-item label="步骤名称：">
             <el-input  v-model="formInfo.name" size="mini"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
         <el-form-item label="步骤类型：">
            <el-select v-model="formInfo.type" style="width: 100%" size="mini">
                <el-option
                :label="item.Text"
                :value="item.Value"
                :key="item.Value"
                v-for="item in types"
                ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
    </el-row>
    <el-row style="margin-top:-8px">
       <el-form-item label="标　　签：" prop="icon">
            <el-input v-model="formInfo.icon" size="mini" readonly>
            <el-button
              size="mini"
              type="primary"
              icon="el-icon-picture-outline"
              slot="append"
              @click="selectIcon()"
            >选择标签</el-button>
          </el-input>
      </el-form-item>
    </el-row>
    <el-row style="margin-top:-8px">
        <el-col :span="12">
            <el-form-item label="能否移动：" prop="view_only">
            <el-radio-group v-model="formInfo.view_only">
                <el-radio :label="true">不能</el-radio>
                <el-radio :label="false">可以</el-radio>
            </el-radio-group>
            </el-form-item>
        </el-col>
        <el-col :span="12">
            <el-form-item label="是否可选：" prop="is_choosable">
            <el-radio-group v-model="formInfo.is_choosable">
                <el-radio :label="100">可选</el-radio>
                <el-radio :label="110">固定</el-radio>
            </el-radio-group>
            </el-form-item>
        </el-col>
      </el-row>
      <el-row style="margin-top:-8px">
        <el-form-item label="操作人员：">
        <el-input v-model="formInfo.person_name" size="mini" readonly>
            <el-button
            size="mini"
            type="primary"
            icon="el-icon-picture-outline"
            slot="append"
            @click="selectChooseManager()"
            >选择人员</el-button>
        </el-input>
        </el-form-item>
      </el-row>
      <el-row style="margin-top:-8px">
         <el-form-item label="操作人员类型："  prop="handler_type">
            <el-select v-model="formInfo.handler_type" style="width: 100%" size="mini">
              <el-option
                :label="item.Text"
                :value="parseInt(item.Value)"
                :key="parseInt(item.Value)"
                v-for="item in flowHandlerType"
              ></el-option>
            </el-select>
          </el-form-item>
      </el-row>
      <el-row style="margin-top:-8px">
        <el-form-item label="默认操作人员：">
            <el-input v-model="formInfo.handler_name" size="mini"  readonly>
              <el-button
                size="mini"
                type="primary"
                icon="el-icon-picture-outline"
                slot="append"
                @click="selectDefaultManager()"
              >选择人员</el-button>
            </el-input>
          </el-form-item>
      </el-row>
      <el-row style="margin-top:-8px">
        <el-col :span="12">
          <el-form-item label="处理策略：" prop="processing_strategy">
            <el-select v-model="formInfo.processing_strategy" style="width: 100%" size="mini">
              <el-option
                :label="item.Text"
                :value="parseInt(item.Value)"
                :key="parseInt(item.Value)"
                v-for="item in flowHandleStrategy"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="策略占比：">
            <el-input type="number" v-model="formInfo.processing_percent" size="mini"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="会签策略：" prop="sign_strategy">
            <el-select v-model="formInfo.sign_strategy" style="width: 100%" size="mini">
              <el-option
                :label="item.Text"
                :value="parseInt(item.Value)"
                :key="parseInt(item.Value)"
                v-for="item in flowSignStrategy"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="会签占比：" >
            <el-input type="number" v-model="formInfo.sign_percent" size="mini"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="退回类型：" prop="return_type">
            <el-select v-model="formInfo.return_type" style="width: 100%" size="mini">
              <el-option
                :label="item.Text"
                :value="parseInt(item.Value)"
                :key="parseInt(item.Value)"
                v-for="item in flowReturnType"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="退回步骤：">
            <el-select v-model="formInfo.return_step" style="width: 100%" size="mini">
              <el-option
                :label="item.Text"
                :value="item.Value"
                :key="item.Value"
                v-for="item in returnSteps"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-form-item label="操作按钮："  prop="button_names">
          <el-input v-model="formInfo.button_names" size="mini" readonly>
            <el-button 
            size="mini" 
            type="primary"
            icon="el-icon-picture-outline" 
            slot="append"
            @click="selectButton()"
            >选择按钮</el-button>
          </el-input>
        </el-form-item>
      </el-row>
    </el-form>
    <el-form :model="lineInfo" label-width="120px" v-show="type === 'line'">
      <el-form-item label="条件标题：">
          <el-input v-model="lineInfo.label" size="mini"  maxlength="20"></el-input>
      </el-form-item>
      <el-form-item label="条件信息：">
        <el-input
              v-model="lineInfo.condition"
              size="mini"
              type="textarea"
              rows="4"
              maxlength="200"
              show-word-limit
              placeholder="条件信息"
            ></el-input>
      </el-form-item>
    </el-form>
    <div slot="footer " class="el-dialog__footer">
      <el-button size="mini" type="primary" @click="submitForm('modifyInfo')">暂存信息</el-button>
    </div>
    <el-dialog
      :title="editForm.formTitle"
      :visible.sync="editForm.formVisible"
      v-if="editForm.formVisible"
      :width="editForm.width"
      :modal="false"
      v-dialogDrag
      custom-class="dialog"
      :close-on-click-modal="false"
    >
       <component v-bind:is="curComponent" v-bind:formInfo="formInfo"  @callBack="callBack"></component>
    </el-dialog>
  </div>
</template>
<script>
import IconForm from "../../../../../components/common/elementIcon"; //编辑
import SelectUserForm from "../common/selectuser"; //用户部门-组件
import SelectButtonForm from "../common/selectButton"; //步骤按钮-组件
import { cloneDeep } from "lodash";

export default {
  components: {
    SelectUserForm,
    SelectButtonForm,
    IconForm
  },
  data() {
    return {
      visible: true,
      //node 或 line
      type: 'node',
      //100起始节点 110过程节点 120结束节点
      types: [
        { Value: 100, Text: "起始节点" },
        { Value: 110, Text: "过程节点" },
        { Value: 120, Text: "结束节点" }
      ],
      flowHandlerType:[],//流程处理者类型
      flowReturnType:[],//流程退回类型
      flowHandleStrategy:[],//流程处理策略
      flowSignStrategy:[],//会签策略
      flowData: {},//流程信息
      formInfo: {},//节点信息
      lineInfo: {},//连线信息
      returnSteps:[],//退回步骤
      editForm: {
        formVisible: false, //窗体是否显示
        formTitle: "", //窗体标题
        width:"26%"
      },
      curComponent: null,
      //验证对象，由Rules结尾
      formInfoRules: {
        icon: [
          {
            required: true,
            message: "步骤标签不能为空",
            trigger: "blur"
          }
        ],
        view_only: [
          {
            required: true,
            message: "请确认，步骤节点是否移动",
            trigger: "blur"
          }
        ],
        is_choosable: [
          {
            required: true,
            message: "是否可选审批人不能为空",
            trigger: "blur"
          }
        ],
        handler_type:[
          {
            required: true,
            pattern: /^[1-9]\d*(\.\d+)?$/,
            message: "操作人员类型不能为空",
            trigger: "blur"
          }
        ],
        processing_strategy:[
          {
            required: true,
            pattern: /^[1-9]\d*(\.\d+)?$/,
            message: "处理策略不能为空",
            trigger: "blur"
          }
        ],
        sign_strategy:[
          {
            required: true,
            pattern: /^[1-9]\d*(\.\d+)?$/,
            message: "会签策略不能为空",
            trigger: "blur"
          }
        ],
        button_names:[
          {
            required: true,
            message: "操作按钮不能为空",
            trigger: "blur"
          }
        ]
      },
    };
  },
  methods: {
    /////////////////////////////////////////////////////步骤逻辑/////////////
    /**
     * 表单修改，这里可以根据传入的ID进行业务信息获取
     * @param data
     * @param id
     * @param handlerType 
     * @param returnType  
     * @param handleStrategy 
     * @param signStrategy   
     */
    nodeInit(data, id,handlerType,returnType,handleStrategy,signStrategy) {
      this.type = "node";
      this.flowData = data;
      this.flowHandlerType=handlerType;//流程处理者类型
      this.flowReturnType=returnType;//流程退回类型
      this.flowHandleStrategy=handleStrategy;//流程处理策略
      this.flowSignStrategy=signStrategy;//流程处理策略
      data.nodeList.filter(node => {
        if (node.id === id) {
          this.formInfo = cloneDeep(node);
        }
      });
      this.returnSteps=[];
      if (data.nodeList.length>1) {
          data.nodeList.forEach(element => {
              if (id!=element.id) {
                 this.returnSteps.push({
                    Value:element.id,
                    Text:element.name
                 });
              }
          });
      }
    },
    //选择标签
    selectIcon() {
      this.editForm.formVisible = true; 
      this.editForm.formTitle = "选择标签";
      this.editForm.width = "26%";
      this.curComponent = IconForm;
    },
    //选择可操作人员
    selectChooseManager() {
      this.formInfo.optType="chooseHandler";
      this.editForm.formVisible = true;
      this.editForm.formTitle = "选择可操作人员";
      this.editForm.width = "40%";
      this.curComponent = SelectUserForm;
    },
    //选择默认处理者人员
    selectDefaultManager() {
      this.formInfo.optType="defaultHandler";
      this.editForm.formVisible = true;
      this.editForm.formTitle = "选择默认处理者人员";
      this.editForm.width = "36%";
      this.curComponent = SelectUserForm;
    },
    //选择按钮
    selectButton() {
      this.formInfo.optType="selectButton";
      this.editForm.formVisible = true;
      this.editForm.formTitle = "选择默认处理者人员";
      this.editForm.width = "36%";
      this.curComponent = SelectButtonForm;
    },
    //回调
    callBack(info) {
      if (info != null && info != "") {
        //选择标签回调
        if (info.type=="elementIcon") {
            this.formInfo.icon=info.info;
        }
        if (info.type=="chooseHandler") {
            this.formInfo.person_name = info.info.label;
            this.formInfo.choose_person = info.info.id;
        }       
        if (info.type=="defaultHandler") {
            this.formInfo.handler_name = info.info.label;
            this.formInfo.default_handler = info.info.id;
        }
        if (info.type=="selectButton") {
            this.formInfo.button_names = info.info.label;
            this.formInfo.button_ids = info.info.id;
        }
      }
      this.editForm.formVisible = false;
    },
    /////////////////////////////////////////////////////连线逻辑/////////////
    //连线初始化
    lineInit(line) {
      this.type = 'line';
      this.lineInfo = line;
    },
    ///////////////////////////暂存
    //保存信息
    submitForm(modifyRef) {
      this.$refs[modifyRef].validate(valid => {
        if (valid) {
          if (this.type=="node") {
             this.flowData.nodeList.filter((node) => {
              if (node.id === this.formInfo.id) {
                  node.name = this.formInfo.name;
                  node.type = this.formInfo.type;
                  node.icon = this.formInfo.icon;
                  node.view_only = this.formInfo.view_only;
                  node.is_choosable = this.formInfo.is_choosable;
                  node.person_name = this.formInfo.person_name;
                  node.choose_person = this.formInfo.choose_person;
                  node.handler_type = this.formInfo.handler_type;
                  node.default_handler = this.formInfo.default_handler;
                  node.handler_name = this.formInfo.handler_name;
                  node.processing_strategy = this.formInfo.processing_strategy;
                  node.processing_percent = this.formInfo.processing_percent;
                  node.sign_strategy = this.formInfo.sign_strategy;
                  node.sign_percent = this.formInfo.sign_percent;
                  node.return_type = this.formInfo.return_type;
                  node.return_step = this.formInfo.return_step;
                  node.button_ids = this.formInfo.button_ids;
                  node.button_names = this.formInfo.button_names;
                  this.$emit('repaintEverything');
                  this.$messageTip.info("暂存成功！");  
              }
            });
          } else {
             this.$emit('setLineLabel', this.lineInfo.from, this.lineInfo.to, this.lineInfo.label, this.lineInfo.condition);
          }
        } else {
          return false;
        }
      });
    },
  }
};
</script>